@import "../mixins/common";
/*顶部工具栏*/
$bg:#f7f9f8;
.site-nav{
	width: auto;
	height: 30px;
	background:$bg;
	position: relative;
	s{
		position: absolute;
		top: 13px; 
		right: 8px;
		width: 8px;
		height: 4px;
		margin-left: 5px;
		background: url(../../static/images/header-img.png) no-repeat 0 0;
	}
	.fl li{
		float: left;
		line-height: 30px;
		margin-right: 10px;
	}
	.city{
		position: relative;
		color: #008842;
		&:hover .city-con{
			display: block;
		}
	}
	.city-sz{
		float:left; 
		height:16px; 
		line-height:16px; 
		margin:7px 0; 
		cursor: pointer;//光标呈现为指示链接的指针（一只手）
	}
	.city-tit{
		overflow:hidden; 
		height:20px;
		float:left;
	}
	.city-name{
		z-index: 100; 
		position: relative; 
		display:block; 
		float:left; 
		height: 20px; 
		line-height:20px; 
		margin-top:5px; 
		padding:0 20px 5px 5px;
		height: 16px; 
		line-height:16px;
		padding:2px 20px 5px 10px;
		color:#008842; 
		cursor: pointer;
		s{
			top:9px;
		}
		.Rotate{
			transform: rotate(180deg);
			transition:transform .2s ease-in 0s
		}
	}
	.city-con{
		display: none;
		position: absolute;
		top: 28px;
		left: 0;
		width: 482px;
		border: 2px solid #007f4d;
		background: #fff;
		z-index: 100;
		a{
			color: #727272;
			margin: 0 5px;
			float: left;
			display: inline-block;
			white-space: nowrap;
		}
		.headline{
			padding: 0 15px;
			line-height: 30px;
			color: #727272;
			background: #ededed;
			a{
				float: right;
				color: #008842;
				font-family: simsun;
				&:hover{
					text-decoration: underline;
				}
			}
		}
		.city-hot{
			overflow: hidden;
			margin: 10px 15px;
			line-height: 18px;
			span{
				display: block;
				margin-bottom: 5px;
				font-weight: bold;
				color: #666;
				i{
					width: 16px;
					height: 16px;
					margin-right: 5px;
					background: url(../../static/images/header-img.png) no-repeat left top;
					background-position: -174px 0;
				}
			}
			a{
				padding: 3px 10px 3px 15px;
			}
		}
		.citytab{
			margin: 10px 0;
			padding: 0 15px;
			span{
				// float: left;
				display:inline-block;
				width: 19%;
				border-bottom: 1px solid #fff;
				border-bottom-color: #e0e0e0;
				text-align: center;
				cursor: pointer;
				
			}
		}
		
		.citylist{
			display: none;
			margin: 0 15px 15px;
			
			dl{
				display: block;
				overflow: hidden;
				zoom: 1;
				line-height: 22px;
				dt{
					font: bold 12px/22px Arial,"Microsoft YaHei";
					color: #008842;
					float: left;
					margin-right: 10px;
					text-align: center;
				}
				dd{
					overflow: hidden;
					zoom: 1;
					a{
						float: inherit;
						width: 18%;
						margin: 0 0 0 5px;
					}
				}
			}
		}
		.block{
			display: block;
		}
	}
	.fr {
		li{
			position: relative;
			float: right;
			line-height: 30px;
			padding: 0 10px;
			text-align: center;
			&:hover .con {
				display: block; 
			}
		}
		i{
			width: 18px;
			height: 18px;
			margin-right: 5px;
			background: url(../../static/images/header-img.png) no-repeat left top;
		}
		.tit{
			float: left;
			overflow: hidden;
			height: 30px;
			a{
				display: block;
				float: left;
				height: 30px;
				line-height: 30px;
				padding: 0 20px 0 10px;
				cursor: pointer;
				z-index: 100;
				border: solid $bg;
				border-width: 0 1px;
				position: relative;
			}
			// &:hover{
			// 	border-left:1px solid #b4c1a3;
			// 	border-right:1px solid #b4c1a3;
			// }
		}
		.con{
			display: none;//隐藏
			position: absolute;
			top: 30px;
			left: 0;
			border: 1px solid #b4c1a3;
			background: #fff;
		}
		.myyiguo, .mobile{
			padding: 0;
			width: 105px;
			&:hover s{
				transform: rotate(180deg);
				transition:transform .2s ease-in 0s
			}
		}
	}
	.myyiguo .tit i{
		background-position: -40px 0;
	}
	.mobile .tit i{
		background-position: -64px 0;
	}
	.pay i{
		width: 22px;
		background-position: -147px 0;
	}
	.TEL i{
		background-position: -86px 0;
	}
	.apt img{
		vertical-align: middle;
	}
	.myyiguo .con{
		width: 100px;
		padding: 5px 12px;
		text-align: left;
		z-index: 100;
		a{
			display: block;
			line-height: 25px;
			color: #727272;
			&:hover{color: #008842;}
		}
		b{
			margin-left: 10px;
			 padding: 0 5px;
			 color: #fff;
			 background: #008842;
			 border-radius: 16px;
		}
	}
	.mobile {
		.con{
			width: 125px;
			padding: 10px;
			line-height: 25px;
			z-index: 100;
		}
		.item{
			margin: 5px 0;
			img{
				display: block;
			}
		}
	}	
}
/*页头*/
.header{
	background: #e0e0e0;
	.wrap{
		height: 58px;
		padding: 15px 0 5px 0;
		.logo{
			float: left;
			width: 280px;
			margin-right: 10px;
			a{
				display: block;
				width: 145px;
				height: 50px;
				background: url(../../static/images/logo.png) no-repeat left top;
			}
		}
		.search{
			height: 58px;
			width: 528px;
			float: left;
			.search-input{
				float: left;
				width: 425px;
				height: 26px;
				line-height: 26px;
				padding: 0 10px;
				color: #999;
				border: 1px solid #008842;
				background: #e0e0e0;
				&:focus{
					background: #fff;
				}	
			}
			.search-btn{
				float: left;
				display: block;
				width: 81px;
				height: 28px;
				line-height: 28px;
				padding: 0;
				border: none;
				cursor: pointer;
				color: #fff;
				font-size: 14px;
				background: #008842;
			}
			.search-keywords{
				height: 30px;
				line-height: 30px;
				a{
					margin-right: 5px;
					color: #727272;
					display: inline-block;
					.hot{
						color: #008842;
					}
				}
			}
		}
		.shopping-cart{
			z-index: 88;
			float: right;
			position: relative;
			.shopping-btn{
				width: 170px;
				height: 28px;
				padding: 6px 0;
				line-height: 28px;
				text-align: center;
				font-size: 25px;
				border: 1px solid #008842;
				background: #fff;
				cursor: pointer;
				a{
					display: block;
					color: #008842;
				}
				.totleNum{
					display: inline-block;
					vertical-align: middle;
					width: 28px;
					height: 20px;
					margin-right: 10px;
					font-size: 12px;
					background: url(../../static/images/header-img.png) no-repeat -112px 0;
					b{
						display: block;
						width: 24px;
						line-height: 12px;
						margin-right: 4px;
						text-align:center;
					}
				}
				.totPrice{
					font-weight: normal;
					font-family: Arial, "Microsoft YaHei";
				}
			}
			.shopping-list{
				z-index: 88;
				position: absolute;
				top: 41px;
				right: 0;
				width: 380px;
				padding: 10px;
				background: #fff;
				border: 1px solid #007f4d;
				.nogoods{
					width: 380px;
					height: 120px;
					line-height: 120px;
					text-align: center;
					background: url(../../static/images/none-bg-w190.jpg) no-repeat center #fff;
				}
				p{
					width: 380px;
					height: 28px;
					line-height: 28px;
					color: #008842;
					margin: -10px 0 0 -10px;
					padding: 0 10px;
					background: #ededed;
					overflow: hidden;
					white-space: nowrap;//规定段落中的文本不进行换行
					text-overflow: ellipsis;//使用省略符号（"..."）来代表被裁剪的文本
				}
				ul{
					display: block;
					position: relative;
					overflow-x: hidden;
					overflow-y: auto;
					width: 380px;
					max-height: 264px;
					margin: 10px 0 0 0;
					li{
						position: relative;
						overflow: hidden;
						zoom: 1;
						background: #fff;
						height: 45px;
						padding: 0 0 15px 0;
						line-height: 20px;
						.l{
							float: left;
							margin-right: 5px;
							width: 45px;
							height: 45px;
						}
						.c{
							float: left;
							width: 222px;
						}
						.r{
							float: left;
							text-align: right;
							width: 90px;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
				}
				.price-total{
					font-size: 12px;
					line-height: 27px;
					margin-top: 5px;
					padding-top: 10px;
					text-align: right;
					border-top: 1px solid #dcdcdc;
					span{
						margin-left: 15px;
						b{
							color: #e7380d;
							font-size: 16px;
							margin: 0 5px;
						}
					}
					.settleup{
						display: inline-block;
						width: 75px;
						height: 27px;
						font-size: 12px;
						text-align: center;
						color: #fff;
						background: #008842;
					}
				}
			}
		}
	}
}
.header-nav{
	z-index: 77;
	position: relative;
	.catalogs{
		float: left;
		position: relative;
		.catalogs-title{
			width: 180px;
			height: 38px;
			position: relative;
			text-align: center;
			background: #008842;
			a{
				overflow: hidden;
				font: bold 15px/16px "Microsoft YaHei";
				color: #fff;
				display: block;
				height: 16px;
				padding: 11px 0;
			}
		}
		.catalogs-list{
			position: absolute;
			height: 462px;
			background: rgba(255,255,255,0.9);
			.item{
				&:hover i{
					margin-left: 7px;
				}
				&:hover h3{
					background: #fff;
				}
				&:hover s{
					display: block;
				}
			}
			h3 a{
				overflow: hidden;
				position: relative;
				display: block;
				width:165px;
				height: 24px;
				padding: 9px 0 9px 15px;
				font: normal 14px/24px "Microsoft YaHei";
				
			}
			h3 i{
				overflow: hidden;
				width: 24px;
				height: 24px;
				margin-right: 15px;
				background: url(../../static/images/nav-icon.png) no-repeat 0px 0px;
				transition: all .3s ease-in;
			}
			.t01_channelhome a i{
				background-position: 0 0;
			}
			.t02_channelhome a i{
				background-position: -24px 0;
			}
			.t03_channelhome a i{
				background-position: -144px 0;
			}
			.t04_channelhome a i{
				background-position: -96px 0;
			}
			.t05_channelhome a i{
				background-position: -48px 0;
			}
			.t06_channelhome a i{
				background-position: -72px 0;
			}
			.t07_channelhome a i{
				background-position: -192px 0;
			}
			.t08_channelhome a i{
				background-position: -120px 0;
			}
			.t09_channelhome a i{
				background-position: -216px 0;
			}
			.t10_channelhome a i{
				background-position: -168px 0;
			}
			.t11_channelhome a i{
				background-position: -240px 0;
			}
			h3 s{
				display: none;
				position: absolute;
				top: 7px;
				right: 18px;
				font-family: Arial;
				text-decoration: none;
			}
			.sub-item{
				z-index: 3;
				// display: none;
				position: absolute;top: -38px;
				left: 180px;
				width: 215px;
				height: 464px;
				padding: 17px 20px;
				border: 1px solid #bbb;
				background: rgba(255,255,255,0.9);
				background: #fff\9;
				h4{
					margin-bottom: 10px;
					font: normal 18px "Microsoft YaHei";
					text-decoration: underline;
					a{
						color: #20985a;
					}
				}
				.sub-list {}
				.sub-list a{
					display: inline-block;
					line-height: 25px;
					margin-right: 30px;
					color: #686868;
					&:hover{
						color: #008842;
					}
				.catalogs-ad{
					position: absolute;
					bottom: 10px;
					}
				}
			}
		}
	} 
}
.swiper-container{
	position: relative;
	top:-38px;
	height: 500px;
	img{
		position: absolute;
		left: -200px;
	}
}
.ad-item{
	margin-top: -25px;
	ul{
		zoom: 1;
		margin-left: -12px;
		margin-top: 10px;
		padding-top: 7px;
		li{
			position: relative;
			overflow: hidden;
			float: left;
			width: 290px;
			height: 290px;
			margin: 0 0 10px 13px;
			&:hover{
				box-shadow: 0px 0px 7px #444;
			}
			p{
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				width: 270px;
				height: 57px;
				line-height: 25px;
				margin: 10px 10px 10px 10px;
				color: #575757;
				text-align: center;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				background: rgba(255,255,255,0.9);
				b{
					display: block;
					font: bold 22px "Microsoft YaHei";
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}
}
.footer_service{
	background: #e0e0e0;
	margin-top: 50px;
	padding: 30px 0;
	li{
		float: left;
		width: 190px;
		height: 42px;
		margin-left: 55px;
		padding-left: 55px;
		background: url(http://static01.yiguo.com/www/images/footer_service_icon.png) no-repeat left top;
		b{
			display: block;
			padding-left: 15px;
			color: #007f4d;
			font: normal 18px/25px "Microsoft YaHei";
			border-left: 1px solid #a6a6a6;
		}
		span{
			display: block;
			padding-left: 15px;
			border-left: 1px solid #a6a6a6;
		}
	}
	.s1{
		background-position: 0 0;
	}
	.s2{
		background-position: 0 -42px;
	}
	.s3{
		background-position: 0 -84px;
	}
	.s4{
		background-position: 0 -126px;
	}
}
.footer{
	zoom: 1;
	clear: both;
	position: relative;
	padding-bottom: 20px;
	border-top: 1px solid #e0e0e0;
	.wrap{
		margin: 50px auto 0;
	}
	dl{
		width: 190px;
		float: left;
		margin-left: 50px;
		display: inline;
		dt{
			 height: 23px;
			 line-height: 23px;
			 background: url(http://static01.yiguo.com/www/images/footer_icon.png) no-repeat;
			 font-size: 14px;
			 text-indent: 40px;
		}
		dd{
			border-left: 1px dashed #A8A8A8;
			padding-left: 20px;
			height: 110px;
			min-height: 110px;
			margin: 15px 0 0 13px;
			a{
				 color: #575556;
				 line-height: 22px;
			}
		}
	 }
	 .col1 dt{
		background-position: 0 0;
	 }
	 .col2 dt{
	 	background-position: 0 -23px;
	 }
	 .col3 dt{
	 	background-position: 0 -46px;
	 }
	 .col4 dt{
	 	background-position: 0 -69px;
	 }
	 .col5 dt{
	 	background-position: 0 -92px;
	 }
	 .service{
		 clear: both;
		 text-align: center;
		 padding: 60px 0 20px;
		 color: #008842;
		 font-size: 14px;
		 span{
			 display: inline-block;
			 padding: 0 10px;
		 }
	 }
	 .copyright{
		 clear: both;
		 color: #717171;
		 text-align: center;
		 line-height: 22px;
		 .authentication a{
			 display: inline-block;
			 position: relative;
			 margin: 0 10px;
			 zoom: 1;
			 vertical-align: middle;
		 }
	 }
}
// #ui-id-1{
// 	overflow: hidden;
// 	position: absolute;
// 	left: 0;
// 	top: 27px;
// 	width: 445px;
// 	border: 1px solid #ccc;
// 	background: #fff;
// 	z-index: 999;
// 	li{
// 		overflow: hidden;
// 		padding: 3px 6px;
// 		line-height: 22px;
// 		cursor: pointer;
// 		display: list-item;
// 		text-align: -webkit-match-parent;
// 		// &:hover {
// 		// 	background: rgb(255,223,198);
// 		// }
// 	}
// }
//商品楼层
.floor{
	position: relative;
	margin-top: 18px;
	.floor-title{
		position: relative;
		height: 32px;
		line-height: 32px;
		margin-bottom: 5px;
		h2{
			float: left;
			height: 32px;
			font: bold 18px "Microsoft YaHei";
			a{
				color: #fc5f3c;
				i{
					display: inline-block;
					width: 31px;
					height: 18px;
					margin-right: 10px;
					padding: 10px 7px 4px 7px;
					color: #fff;
					font: bold 14px "Microsoft YaHei";
					vertical-align: text-bottom;
					background: url(http://static01.yiguo.com/www/images/floor_tit_icon.png) no-repeat left top;
				}
			}
		}
		.keyword{
			float: right;
			color: #4e4e4e;
		}
	}
	.floor-con{
		float: left;
		.floor-side{
			float: left;
			width: 275px;
			height: 462px;
			a{
				display: block;
				img{
					border: none;
				}
			}
		}
		.floor-main{
			position: relative;
			float: right;
			background: #fff;
			width: 924px;
			height: 462px;
			border-top: 1px solid #d5d5d5;
			border-left:1px solid #d5d5d5;
			li{
				float: left;
				overflow: hidden;
				width: 230px;
				height: 230px;
				border-right: 1px solid #d5d5d5;
				border-bottom: 1px solid #d5d5d5;
				a{
					display: block;
					transition: transform .2s linear;
					img{
						border: none;
					}
					&:hover{
						transform: translateX(5px);
					}
				}
			}
			.wide{
				width: 461px;
			}
		}
	}
	
}
.sidebar{
	display: block;
	z-index: 100;
	position: fixed;
	bottom: 20px;
	right: 47%;
	margin-right: -625px;
	width: 56px;
	.s-btn{
		color: #444;
		overflow: hidden;
		display: block;
		width: 50px;
		height: 42px;
		margin-bottom: 10px;
		background: url(http://static01.yiguo.com/www/images/sidebar.png) no-repeat left top;
	}
	.goTop{
		display: none;
		background-position: 0 0;
		&:hover{
			background-position: -56px 0;
		}
	}
	.service{
		background-position: 0 -46px;
		&:hover{
			background-position: -56px -46px;
		}
	}
}
